<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="杨宁争">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        section {
            width: 200px;
            height: 200px;
            border: 5px solid red;
            padding: 10px;
            position: absolute;
            /*top: 10px;
        left: 50px;*/
            overflow: scroll;
            margin: 20px 40px;
        }
    </style>
</head>

<body>
    <section>
        <p>第01行</p>
        <p>第02行</p>
        <p>第03行</p>
        <p>第04行</p>
        <p>第05行</p>
        <p>第06行</p>
        <p>第07行</p>
        <p>第08行</p>
        <p>第09行</p>
        <p>第10行</p>
        <p>第11行</p>
        <p>第12行</p>
        <p>第13行</p>
        <p>第14行</p>
        <p>第15行</p>
        <p>第16行</p>
        <p>第17行</p>
        <p>第18行</p>
        <p>第19行</p>
        <p>第20行</p>
    </section>
</body>

</html>
<script>
    var sec = document.querySelector('section');

    // 获取标签的大小

    // console.log(sec.clientWidth);
    // console.log(sec.clientHeight);


    // console.log(sec.offsetHeight);

    // console.log(sec.offsetWidth);
    //  获取标签的位子


    // 距离页面左上角的偏移量
    // console.log(sec.offsetTop);
    // console.log(sec.offsetLeft);



    // b标签的滚动条卷曲的大小


    // console.log(sec.scrollTop);





    var allp = document.querySelectorAll('p');
    sec.onscroll = function () {
            if (sec.scrollTop > 300) {
                for (var i = 0; i < allp.length; i++) {
                    allp[i].style.color = 'red';
                }

            } else {
                for (var i = 0; i < allp.length; i++) {
                    allp[i].style.color = '#000';
                }
            }
    }
</script>